<!--
 * @Description: 
 * @Author: ljy
 * @Date: 2021-07-01 14:53:27
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-03 17:24:43
-->
<template>
  <div class="body">
    <div class="top1">
      <van-icon class="icon" name="arrow-left" @click="toBack" />
      <span class="title">订 单 详 情</span>
    </div>
    <div class="order" v-for="item in queryData.orderLines" :key="item.id">
      <img class="img" :src="item.product.photo" alt="" />
      <div class="order2">
        <div style="font-size: 13px">{{ item.product.name }}</div>
        <div>{{ item.product.description }}</div>
        <div style="font-size: 15px; margin-top: 10px">
          ￥{{ item.product.price }}
        </div>
      </div>
      <div style="margin-top: 50px">×{{ item.number }}</div>
    </div>
    <div class="money">
      总计：￥<span style="color: red">{{ money }}</span>
    </div>
    <div class="service">
      <div>
        服务地址：{{ queryData.address.province }}{{ queryData.address.city
        }}{{ queryData.address.area }}{{ queryData.address.address }}
      </div>
      <div>
        联系方式：{{ queryData.customer.username }}({{
          queryData.customer.telephone
        }})
      </div>
      <div>下单时间：{{ moment(queryData.orderTime).format('YYYY-MM-DD hh:mm:ss') }}</div>
      <div>服务时间：{{ moment(queryData.serviceTime).format('YYYY-MM-DD hh:mm:ss') }}</div>
      <div class="status">{{ queryData.status }}</div>
    </div>
  </div>
</template>

<script>
import { findById } from "@/api/order";
import moment from "moment";
export default {
  data() {
    return {
      moment,
      queryData: {},
      money: 0,
    };
  },
  computed: {},
  methods: {
    toBack() {
      this.$router.push({
        path: "/Index",
      });
    },
    async queryId() {
      let res = await findById({ id: this.$route.query.index });
      //   console.log(this.$route.query.index);
      this.queryData = res.data;
      this.queryData.orderLines.forEach((item) => {
        this.money += item.product.price * item.number;
      });
      //   console.log(this.queryData.orderLines);
    },
  },
  created() {
    this.queryId();
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.body{
  width:100%;
  height: 617px;
  overflow: scroll;
}
.top1 {
  width: auto;
  height: 50px;
  background-image: linear-gradient(to right,#CCFFFF, #CCFF66,#6699CC);
  text-align: center;
}
.icon {
  float: left;
  margin: 15px;
}
.title {
  line-height: 50px;
}
.order {
  width: auto;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 12px;
  background-color: rgb(235, 232, 232);
  margin: 15px;
  box-shadow: 0px 0px 10px rgba(128, 128, 177,0.5);

}
.order2 {
  width: 15rem;
}
.img {
  width: 5rem;
  height: 5rem;
}
.money,
.status {
  text-align: right;
  margin: 20px;
  font-size: 13px;
}
.service {
  width: auto;
  height: 150px;
  background-color: rgb(235, 232, 232);
  margin: 15px;
  padding: 5px;
  font-size: 14px;
  box-shadow: 0px 0px 10px rgba(128, 128, 177,0.5);

  div {
    margin: 5px 0;
  }
}
</style>